<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>青大科技数据展示</title>
	<link rel="stylesheet" href="css/1.css">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="css/Icomoon/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<!-- <meta http-equiv="refresh" content="3600">每过一个小时刷新网页 -->
</head>
<body class="beijing">
	<div id="loading">
		<div id="loading-center">
			<div id="loading-center-absolute">
				<div class="object" id="object_one"></div>
				<div class="object" id="object_two"></div>
				<div class="object" id="object_three"></div>
				<div class="object" id="object_four"></div>
				<div class="object" id="object_five"></div>
				<div class="object" id="object_six"></div>
				<div class="object" id="object_seven"></div>
				<div class="object" id="object_eight"></div>
			</div>
		</div>
	</div>
	<div class="container-fluid bg" id="app">
		<div class="row clearfix">
			<div class="col-md-12 col-lg-12 col-xs-12 column">
				<div class="row clearfix">
					<div class="col-md-3 col-xs-3 col-lg-3 column">
						<div class="row clearfix">
							<div class="col-md-12 col-xs-12 col-lg-12 column logo">
								
							</div>
						</div>
						<div class="row clearfix">
							<div class="col-md-12 col-xs-12 col-lg-12 column lm">
								<div class="row clearfix">
									<div class="col-md-12 col-xs-12 col-lg-12 column lmt">
										<div class="sbhyd">设备活跃度<span>（开锁次数）</span></div>
									</div>
								</div>
								<div class="row clearfix">
									<div class="col-md-12 col-xs-12 col-lg-12 column">
										<div id="zhuzt" class="zhu"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="row clearfix">
							<div class="col-md-12 col-xs-12 col-lg-12 column lb">
								<div class="row clearfix">
									<div class="col-md-12 col-xs-12 col-lg-12 column lbt">
										<div class="sblx">设备类型</div>
									</div>
								</div>
								<div class="row clearfix">
									<div class="col-md-12 col-xs-12 col-lg-12 column">
										<div id="bingzt" class="bing"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-6 col-xs-6 col-lg-6 column">
						<div class="row clearfix">
							<div class="col-md-12 col-xs-12 col-lg-12 column mt">
								<div class="biaoti">分散网点行为安全信息管理平台</div>
							</div>
						</div>
						<div class="row clearfix">
							<div class="col-md-12 col-xs-12 col-lg-12 column mm">
								<div class="row clearfix">
									<div class="col-md-12 col-xs-12 col-lg-12 column">
										<div class="qgwdfgt">全国网点覆盖图</div>
									</div>
								</div>
								<div class="row clearfix">
									<div class="col-md-12 col-xs-12 col-lg-12 column">
										<div id="mainMap" class="xuanguang">
										</div>	
										<div class="biaoqian">
											<span class="span1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;<span>已覆盖区域</span>
											<br>
											<span class="span2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;&nbsp;<span>即将进入区域</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row clearfix">
							<div class="col-md-12 col-xs-12 col-lg-12 column mb">
								<div class="row clearfix">
									<div class="col-md-5 col-xs-5 col-lg-5 column">
										<div class="ptljfw">平台累计访问</div>
									</div>
									<div class="col-md-6 col-xs-6 col-lg-6 column mbm">
										<div class="number">
										    <ul class="runNum" id="test"></ul>
										</div>
									</div>
									<div class="col-md-1 col-xs-1 col-lg-1 column mbr">
										<div class="ren">人</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-3 col-xs-3 col-lg-3 column">
						<div class="row clearfix">
							<div class="col-md-12 col-xs-12 col-lg-12 column rt">
								<div class="row clearfix">
									<div class="col-md-12 col-xs-12 col-lg-12 column rtt">
										<div class="sbssyxzt">设备实时运行状态</div>
									</div>
								</div>
								<div class="row clearfix">
									<div class="col-md-12 col-xs-12 col-lg-12 column rtc" id="example">
										
									</div>
								</div>
							</div>
						</div>
						<div class="row clearfix">
							<div class="col-md-12 col-xs-12 col-lg-12 column rb">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts-en.min.js"></script>       
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
	<script src="http://mockjs.com/dist/mock.js"></script>
	<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
	<script src="js/china.js" charset="UTF-8"></script>
	<script src="js/zhejiang.js" charset="UTF-8"></script>
	<script src="js/anhui.js" charset="UTF-8"></script>
	<script src="js/aomen.js" charset="UTF-8"></script>
	<script src="js/beijing.js" charset="UTF-8"></script>
	<script src="js/chongqing.js" charset="UTF-8"></script>
	<script src="js/fujian.js" charset="UTF-8"></script>
	<script src="js/gansu.js" charset="UTF-8"></script>
	<script src="js/guangdong.js" charset="UTF-8"></script>
	<script src="js/guangxi.js" charset="UTF-8"></script>
	<script src="js/guizhou.js" charset="UTF-8"></script>
	<script src="js/hainan.js" charset="UTF-8"></script>
	<script src="js/hebei.js" charset="UTF-8"></script>
	<script src="js/heilongjiang.js" charset="UTF-8"></script>
	<script src="js/henan.js" charset="UTF-8"></script>
	<script src="js/hubei.js" charset="UTF-8"></script>
	<script src="js/hunan.js" charset="UTF-8"></script>
	<script src="js/jiangsu.js" charset="UTF-8"></script>
	<script src="js/jiangxi.js" charset="UTF-8"></script>
	<script src="js/jilin.js" charset="UTF-8"></script>
	<script src="js/liaoning.js" charset="UTF-8"></script>
	<script src="js/neimenggu.js" charset="UTF-8"></script>
	<script src="js/ningxia.js" charset="UTF-8"></script>
	<script src="js/qinghai.js" charset="UTF-8"></script>
	<script src="js/shandong.js" charset="UTF-8"></script>
	<script src="js/shanghai.js" charset="UTF-8"></script>
	<script src="js/shanxi.js" charset="UTF-8"></script>
	<script src="js/shanxi1.js" charset="UTF-8"></script>
	<script src="js/sichuan.js" charset="UTF-8"></script>
	<script src="js/taiwan.js" charset="UTF-8"></script>
	<script src="js/tianjin.js" charset="UTF-8"></script>
	<script src="js/xianggang.js" charset="UTF-8"></script>
	<script src="js/xinjiang.js" charset="UTF-8"></script>
	<script src="js/xizang.js" charset="UTF-8"></script>
	<script src="js/yunnan.js" charset="UTF-8"></script>
	<script>
		var url = 'https://zlb.safeok.net.cn/portal/';
		  setInterval(function () {	
		  //柱状图刷新	  		
	  		$.ajax({
			    url: url+'system/deviceActivity?days=7', 
			    type: 'get',
			    dataType: 'json',
			    contentType: "application/json;charset=utf-8",
			    async : false,//需要改成同步的
			    success:function(res){
			    	datazhu = JSON.stringify(res, null, 4);
			    	datazhu = JSON.parse(datazhu);
			    }
			});
			//表格刷新
	  		$.ajax({
	  		    url: url+'system/deviceRealtimeOperation',
	  		    type: 'get',
	  	   		dataType: 'json',
	  	   		contentType: "application/json;charset=utf-8",
				async : false,//需要改成同步的
	  		}).done(function(data, status, jqXHR){
	  			var content = data.content;
	  			// console.log(content);
	  			// abcabc=[];
	  			data1=[];
	  			// console.log(kx);
	  			let sskx = new Set([]);
	  			content.map(x=>sskx.add(x));
	  			// for (let i of sskx) {
	  			//   shan.add(i);
	  			// };
	  			// console.log(sskx);
	  			let abcabc = [...sskx].filter(x=>!kx.has(x));
				// console.log(abcabc);
	  			// console.log(shan);
	  			kx.clear();
	  			content.map(x=>kx.add(x));
	  			sskx.clear();
	  			// console.log(kx);
	  			// for (let i of shan) {
	  			//   date1.push({name:})
	  			// };
	  			// abcabc = Array.from(shan);
	  			for (var i = 0;i < abcabc.length; i++){
	  			    data1.push(
	  			    	{
	  			    		'name':abcabc[i].stationName,
	  			    		'value':
	  			    		[
		  			    		abcabc[i].stationName,
		  			    		abcabc[i].masterName,
		  			    		abcabc[i].createDate,
		  			    		abcabc[i].status,
		  			    		[abcabc[i].longitude,abcabc[i].latitude]
		  			    	]
	  			    	}
	  			    );
	  			}
	  			for(var i = 0;i < data1.length; i++){
	  			    geoCoordMap1[data1[i].name] = data1[i].value[4];
	  			}
	  			// shan.clear();
	  			// geoCoordMap1 = {
	  			//     '四川': [104.07,30.68],
	  			// };
	  			// var status = 1;
	  			var len = content.length;
	  			var con = {};
	  			var htmlStr = "<table class='table' style='table-layout:fixed;'><thead><tr><th>站点</th><th style='width:4vw;'>站长</th><th style='width:9vw;'>开启时间</th><th style='width:3vw;'>状态</th></tr></thead><tbody>";
	  			for(var i = 0; i < len; i++){
	  			    con = content[i];
	  			    htmlStr += "<tr><td>"+con.stationName+"</td><td>"+con.masterName+"</td><td>"+con.createDate+"</td><td>"+con.status+"</td></tr>";
	  			}
	  			htmlStr += "</tbody></table>";
	  			$("#example").html(htmlStr);	
	  		});
	  		zhuZT.dispose();//销毁原来的图表
	  		zhuZT = echarts.init(document.getElementById('zhuzt'));
	  		datazhu = datazhu.content;
	  		zhuoption = {
					textStyle: {
						color: '#fff'//柱状图每条数据的字体颜色
					},
					xAxis: {
						data: dataAxis,
						axisLabel: {
							inside: true,
							textStyle: {
								color: '#fff'//柱状图横坐标字体颜色
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							show: false
						},
						z: 10
					},
					yAxis: {
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							textStyle: {
								color: '#fff'//柱状图纵坐标颜色
							}
						}
					},
					dataZoom: [{
						type: 'inside'
					}],
				      series: [
				       {
				      	type: 'bar',
				      	itemStyle: {
				      		normal: {
				      			color: new echarts.graphic.LinearGradient(
				      				0, 0, 0, 1, [{
				      					offset: 0,
				      					color: '#83bff6'
				      				}, {
				      					offset: 0.5,
				      					color: '#188df0'
				      				}, {
				      					offset: 1,
				      					color: '#188df0'
				      				}]
				      				)
				      		},
				      		emphasis: {
				      			color: new echarts.graphic.LinearGradient(
				      				0, 0, 0, 1, [{
				      					offset: 0,
				      					color: '#2378f7'
				      				}, {
				      					offset: 0.7,
				      					color: '#2378f7'
				      				}, {
				      					offset: 1,
				      					color: '#83bff6'
				      				}]
				      				)
				      		}
				      	},
				      	data: datazhu,
				      }],
				      label: {
				      	normal: {
				      		show: true,
				      		position: 'top',
				      		formatter: '{c}'//formatter: '{c}次'可以在数据后面显示单位
				      	}
				      },
				  };
				zhuZT.setOption(zhuoption,true);
				ditu.dispose();//销毁原来的图表
				ditu = echarts.init(document.getElementById('mainMap'));
					
				$.ajax({
				    url: url+'system/globalNetData',
				    type: 'get',
				    dataType: 'json',
				    async : false,//需要改成同步的
				    success:function(res){
				      datacity = JSON.stringify(res, null, 4);
				      datacity = JSON.parse(datacity);
				      for(var i=0;i<datacity.content.length;i++){
				        geoCoordMap[datacity.content[i].name] = datacity.content[i].location;
				      }
				    }  
				});
				for (var i = 0; i < datacity.content.length; i++) {
				    BJData.push([ningbo,datacity.content[i]]);
				}

				option = {
				    backgroundColor: 'rgba(0,0,0,0)',//大背景透明
				    tooltip: {
				        trigger: 'item'
				    },
				    // toolbox: {
				    //     show: true,
				    //     // orient: 'vertical',
				    //     left: 'right',
				    //     top: 'bottom',
				    //     feature: {
				    //         saveAsImage: {}
				    //     }
				    // },
				    geo: {
				        regions: [{
				            name: '浙江',
				            itemStyle: {
				                normal: {
				                    areaColor: fgcolor//特定区域的颜色
				                }
				            }
				        },
				        {
				            name: '江西',
				            itemStyle: {
				                normal: {
				                    areaColor: fgcolor
				                }
				            }
				        },
				        {
				            name: '重庆',
				            itemStyle: {
				                normal: {
				                    areaColor: fgcolor
				                }
				            }
				        },
				        {
				            name: '四川',
				            itemStyle: {
				                normal: {
				                    areaColor: fgcolor
				                }
				            }
				        },
				        {
				            name: '上海',
				            itemStyle: {
				                normal: {
				                    areaColor: fgcolor
				                }
				            }
				        },
				        {
				            name: '河南',
				            itemStyle: {
				                normal: {
				                    areaColor: fgcolor
				                }
				            }
				        },
				        {
				            name: '福建',
				            itemStyle: {
				                normal: {
				                    areaColor: fgcolor
				                }
				            }
				        }],
				        zoom:1.2,//默认1，初始地图缩放比例
				        // zlevel: 2,
				        map: 'china',
				        label: {
				            emphasis: {
				                show: true, //鼠标移上去以后是否显示省份名字
				                color: 'white',  
				                fontSize: 20                    
				            }
				        },
				        roam: true,
				        itemStyle: {
				            normal: {
				                areaColor: '#2580C3',//地图底色
				                borderColor: '#094579'//省份边界色
				            },
				            emphasis: {
				                areaColor: '#094579'//鼠标移上去以后的省份颜色
				            }
				        }
				    },
				    series: [
				        {
				            name: '1',
				            type: 'effectScatter',
				            coordinateSystem: 'geo',//地理坐标系
				            zlevel: 2,//显示的图层上下优先级，数字越大显示在越上层,默认0
				            rippleEffect: {
				                //period:4,//动画时间，默认4
				                //scale:2.5,//最大缩放比例，默认2.5
				                brushType: 'stroke',//涟漪效果，还有一种是fill
				            },
				            label: {
				                normal: {
				                    show: false,//目的地城市名称是否显示
				                    position: 'right',//地名显示在坐标点右边
				                    formatter: '{b}'
				                }
				            },
				            tooltip: {
				                trigger: 'item',
				                show: true,  
				                borderWidth: 2, 
				                borderColor: '#19A3C6',
				                textStyle:{  
				                    fontSize: 18,  //提示框文字大小
				                },
				                formatter: function (params) {
				                    var res='<p>智联保</p>';
				                    res+='<div>'+ params.name +'：'+params.value[2]+' 台'+'</div>'
				                    return res;
				                }
				            },//感觉是echarts 的问题，不写这个tooltip就一定会显示坐标什么的
				            symbolSize: function(val) {
				                return val[2] / 10+3;//产品数量的多少，决定城市点的大小
				            },
				            itemStyle: {
				                normal: {
				                    color: '#E62129',//城市点的颜色
				                }
				            },
				            data: BJData.map(function(dataItem) {
				                // var temp = geoCoordMap[dataItem[1].name].concat([dataItem[1].value]).concat('台');
				                return {
				                    name: dataItem[1].name,
				                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
				                };
				            })
				            
				        },
     					// {
     					//     type: 'map',
     					//     map: 'china',
     					//     zoom:1.2,
     					//     zlevel:4,
     					//     label: {
     					//         emphasis: {
     					//             show: true, //鼠标移上去以后是否显示省份名字
     					//             color: 'white',  
     					//             fontSize: 20                    
     					//         }
     					//     },
     					//     roam: true,
     					//     tooltip:{
     					//     	show:false
     					//     },
     					//     itemStyle: {
     					//         normal: {
     					//             areaColor: 'rgba(0,0,0,0)',//地图底色
     					//             borderColor: 'rgba(0,0,0,0)'//省份边界色
     					//         },
     					//         emphasis: {
     					//             areaColor: 'rgba(0,0,0,0)'//鼠标移上去以后的省份颜色
     					//         }
     					//     }
     					// },
				        {
				            name: '2',
				            type: 'effectScatter',
				            coordinateSystem: 'geo',
				            data: convertData1(data1),
				            symbolSize: pointSize,
				            showEffectOn: 'render',
				            rippleEffect: {
				                brushType: 'stroke'
				            },
				            hoverAnimation: true,
				            tooltip: {
				                trigger: 'item',
				                show: true,  
				                borderWidth: 2, 
				                borderColor: '#19A3C6',
				                textStyle:{  
				                    fontSize: 18,  //提示框文字大小
				                },
				                formatter: function (params) {
				                	console.log(params);
				                    var res='<div>'+params.value[2]+'</div>';
				                    res+='<div>' + params.value[3] + '</div>';
				                    res+='<div>' + params.value[4] + '</div>';
				                    res+='<div>' + '开箱 ' + params.value[5] + '</div>';
				                    return res;
				                }
				            },                
				            label: {
				                normal: {                        
				                    formatter: '{b}',
				                    position: 'top',
				                    show: false
				                }
				            },
				            itemStyle: {
				                normal: {                        
				                    color: 'green',//地图圆点的样式
				                    shadowBlur: 10,
				                    shadowColor: 'black'
				                }
				            },
				            zlevel: 3
				        }
				        
				    ]
				};

				ditu.setOption(option);	  		
		  },10000);
		  window.addEventListener("resize",function(){
		  	zhuZT.resize();
		  });
	</script>
	<script src="js/ditu.js"></script>
	<script src="js/3.js"></script>
</body>
</html>
